<script lang="ts">
	import { Button } from "$lib/registry/ui/button/index.js";
	import * as Card from "$lib/registry/ui/card/index.js";
	import { Label } from "$lib/registry/ui/label/index.js";
	import { Switch } from "$lib/registry/ui/switch/index.js";
</script>

<Card.Root>
	<Card.Header>
		<Card.Title>Cookie Settings</Card.Title>
		<Card.Description>Manage your cookie settings here.</Card.Description>
	</Card.Header>
	<Card.Content class="grid gap-6">
		<div class="flex items-center justify-between gap-4">
			<Label for="necessary" class="flex flex-col items-start">
				<span>Strictly Necessary</span>
				<span class="text-muted-foreground font-normal leading-snug">
					These cookies are essential in order to use the website and use its features.
				</span>
			</Label>
			<Switch id="necessary" checked aria-label="Necessary" />
		</div>
		<div class="flex items-center justify-between gap-4">
			<Label for="functional" class="flex flex-col items-start">
				<span>Functional Cookies</span>
				<span class="text-muted-foreground font-normal leading-snug">
					These cookies allow the website to provide personalized functionality.
				</span>
			</Label>
			<Switch id="functional" aria-label="Functional" />
		</div>
	</Card.Content>
	<Card.Footer>
		<Button variant="outline" class="w-full">Save preferences</Button>
	</Card.Footer>
</Card.Root>
